<template>
	<div class="exampleRow">
		<sh-row>
			<sh-col span="12">col-12</sh-col>
			<sh-col span="12">col-12</sh-col>
		</sh-row>
		<sh-row>
			<sh-col span="8">col-8</sh-col>
			<sh-col span="8">col-8</sh-col>
			<sh-col span="8">col-8</sh-col>
		</sh-row>
		<sh-row>
			<sh-col span="6">col-6</sh-col>
			<sh-col span="6">col-6</sh-col>
			<sh-col span="6">col-6</sh-col>
			<sh-col span="6">col-6</sh-col>
		</sh-row>
		<sh-row>
			<sh-col span="4">col-4</sh-col>
			<sh-col span="4">col-4</sh-col>
			<sh-col span="4">col-4</sh-col>
			<sh-col span="4">col-4</sh-col>
			<sh-col span="4">col-4</sh-col>
			<sh-col span="4">col-4</sh-col>
		</sh-row>
	</div>
</template>

<script>
export default {
	name: 'BaseGrid',
	data() {
		return {
			example1: {
				type: 'info',
				title: 'An info prompt',
				block: true
			}
		}
	}
}
</script>

<style scoped lang="scss">
.exampleRow {
	.sh-row {
		margin-bottom: 20px;
	}
	.sh-col {
		text-align: center;
		min-height: 44px;
		line-height: 44px;
		background-color: #ccc;
		&:nth-of-type(2n + 1) {
			background-color: var(--vxe-primary-color);
		}
	}
}
</style>
